<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
	<meta charset="utf-8">
	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
	<script src="./assets/jquery/jquery.min.js"></script>
	<script src="./assets/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>
	<audio src="./assets/farm.mp3" autoplay loop id="farmMusic"></audio>
	<audio src="./assets/gold.mp3" id="goldMusic"></audio>



	<div class="main_x">
		<div class="music">
			<span class="glyphicon glyphicon-volume-up"></span>
		</div>
		<div class="function">
			<div id="sow">
				<img src="image/shoutao.png" alt="">
				<p>播种</p>
			</div>
			<div id="harvest">
				<img src="image/shoutao2.png" alt="">
				<p>收获</p>
			</div>
			<div id="dig">
				<img src="image/chanzi.png" alt="">
				<p>翻土</p>
			</div>
			<div id="allsow">
				<img src="image/allsow.png" alt="">
				<p>一键播种</p>
			</div>
			<div id="allharvest">
				<img src="image/allharvest.png" alt="">
				<p>一键收获</p>
			</div>
			<div id="alldig">
				<img src="image/alldig.png" alt="">
				<p>一键翻土</p>
			</div>
			<div id="reg">
				<img src="image/reg.png" alt="">
				<p>注册</p>
			</div>
			<div id="login">
				<img src="image/login.png" alt="">
				<p>登录</p>
			</div>
		</div>
		<div class="userAndGold">
			<div class="user glyphicon glyphicon-signal">1</div>
			<div class="gold glyphicon glyphicon-yen">0</div>
		</div>
		<div class="table_jz">
			<table>
				<tr>
					<td>
						<img data-status=1 src="image/none.png" id=0 />
					</td>
					<td>
						<img data-status=1 src="image/none.png" id=1 />
					</td>
					<td>
						<img data-status=1 src="image/none.png" id=2 />
					</td>
					<td>
						<img data-status=1 src="image/none.png" id=3 />
					</td>
					<td>
						<img data-status=1 src="image/none.png" id=4 />
					</td>
				</tr>
				<tr>
					<td>
						<img data-status=1 src="image/none.png" id=5 />
					</td>
					<td>
						<img data-status=1 src="image/none.png" id=6 />
					</td>
					<td>
						<img data-status=1 src="image/none.png" id=7 />
					</td>
					<td>
						<img data-status=1 src="image/none.png" id=8 />
					</td>
					<td>
						<img data-status=1 src="image/none.png" id=9 />
					</td>
				</tr>
				<tr>
					<td>
						<img data-status=1 src="image/none.png" id=10 />
					</td>
					<td>
						<img data-status=1 src="image/none.png" id=11 />
					</td>
					<td>
						<img data-status=1 src="image/none.png" id=12 />
					</td>
					<td>
						<img data-status=1 src="image/none.png" id=13 />
					</td>
					<td>
						<img data-status=1 src="image/none.png" id=14 />
					</td>
				</tr>
				<tr>
					<td>
						<img data-status=1 src="image/none.png" id=15 />
					</td>
					<td>
						<img data-status=1 src="image/none.png" id=16 />
					</td>
					<td>
						<img data-status=1 src="image/none.png" id=17 />
					</td>
					<td>
						<img data-status=1 src="image/none.png" id=18 />
					</td>
					<td>
						<img data-status=1 src="image/none.png" id=19 />
					</td>
				</tr>

			</table>




		</div>
	</div>

	<!-- 注册 -->

	<div class="modal regModal fade bs-example-modal-md" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="exampleModalLabel">注册用户</h4>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<label for="username" class="control-label">用户名:</label>
							<input type="text" class="form-control" name="username">
						</div>
						<div class="form-group">
							<label for="password" class="control-label">密码:</label>
							<input type="password" class="form-control" name="password">
						</div>
						<div class="form-group">
							<label for="repassword" class="control-label">再次输入密码:</label>
							<input type="password" class="form-control" name="repassword">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary btnReg">注册</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 登录 -->

	<div class="modal loginModal fade bs-example-modal-md" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="exampleModalLabel">登录</h4>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<label for="username" class="control-label">用户名:</label>
							<input type="text" class="form-control" name="username">
						</div>
						<div class="form-group">
							<label for="password" class="control-label">密码:</label>
							<input type="password" class="form-control" name="password">
						</div>

					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary btnLogin">登录</button>
				</div>
			</div>
		</div>
	</div>



</body>
<script>
	$(function () {

		//保存当前操作状态
		var status = null;//1.空地 2.播种 3.成长 4.收获 5.铲地
		//声明对象保存用户信息。
		var thisUser = JSON.parse(localStorage.getItem("qqfarm")) || {};



		//保存金币
		console.log($("#farmMusic")[0].paused)
		// var gold = 0;//默认为0个金币
		$("#farmMusic")[0].oncanplay = function () {
			if ($("#farmMusic")[0].paused)
				$("#farmMusic").get(0).play();
		}

		$(".main_x .music span").on("click", function () {
			$(this).toggleClass("glyphicon-volume-up glyphicon-volume-off");
			if ($(this).hasClass("glyphicon-volume-up")) {
				$("#farmMusic").get(0).play();
			} else {
				$("#farmMusic").get(0).pause();
			}
		})

		//注册功能
		$("#reg").on("click", function () {
			$(".regModal").modal();
		})

		//在弹出窗点击注册按钮
		$(".btnReg").on("click", function () {
			var username = $(".regModal [name=username]").val();
			var password = $(".regModal [name=password]").val();
			var repassword = $(".regModal [name=repassword]").val();

			if(username.trim() == ""){
				alert("用户名不能为空");
			}

			if(password.trim() != repassword.trim()){
				alert("两次密码输入必须一致");
			}

			$.ajax({
				url:"http://localhost:8090/qqfarm/qqclient/CustomerH5Servlet?method=customerRegister",
				data:{username:username,password:password},
				success:function(res){
					console.log(res);
					if(res.successful){
						alert("注册成功");
						$(".regModal").modal('hide');
					}else{
						alert("注册成功");
						$(".regModal").modal('hide');
					}
				}
			})
		})

		//在弹出窗点击登录按钮
		$(".btnLogin").on("click", function () {
			var username = $(".loginModal [name=username]").val();
			var password = $(".loginModal [name=password]").val();


			if(username.trim() == ""){
				alert("用户名不能为空");
			}

			if(password.trim() == ""){
				alert("密码不能为空");
			}

			$.ajax({
				url:"http://localhost:8090/qqfarm/qqclient/CustomerH5Servlet?method=customerLogin",
				data:{username:username,password:password},
				success:function(res){
					if(res.successful){
						alert("登录成功");
						$(".loginModal").modal('hide');
						thisUser = res.customer;
					
						//将用户信息展示在页面中
						$(".userAndGold .user").html(thisUser.username);
						$(".userAndGold .gold").html(thisUser.money);


					}else{
						alert("登陆成功");
						$(".loginModal").modal('hide');
						$(".userAndGold .user").html(thisUser.username);
						$(".userAndGold .gold").html(thisUser.money);
					}
				}
			})
		})

		//登录功能
		$("#login").on("click", function () {
			$(".loginModal").modal();
		})

		//播种
		$("#sow").on("click", function () {
			//更改鼠标图标
			$("body").css("cursor", "url('image/shoutao.cur'),auto")
			//更改状态
			status = 2;
		})
		//收获
		$("#harvest").on("click", function () {
			//更改鼠标图标
			$("body").css("cursor", "url('image/shoutao2.png'),auto");


			//更改状态
			status = 4;
		})
		//翻土铲地
		$("#dig").on("click", function () {
			//更改鼠标图标
			$("body").css("cursor", "url('image/chanzi.png'),auto")
			//更改状态
			status = 5;
		})

		//一键操作
		$("#allsow").on("click", function () {
			//从第0块地播种到第19块地
			var id = 0;
			alloption($("table tr td img"), "sow");

			setTimeout(() => {
				alloption($("table tr td img"), "grow");
				setTimeout(() => {

					alloption($("table tr td img"), "growover");
				}, 5000);
			}, 5000);

		})

		$("#allharvest").on("click", function () {
			alloption($("table tr td img"), "harvest");
		})

		$("#alldig").on("click", function () {
			alloption($("table tr td img"), "chan");
		})

		function alloption(elements, opt) {
			var index = 0;

			var timeId = setInterval(() => {


				if (opt == "sow") {
					if ($(elements).eq(index).attr("data-status") == 1) {
						$(elements).eq(index).attr("src", "image/seed.png");
						$(elements).eq(index).attr("data-status", 2);
					}
				} else if (opt == "grow") {
					if ($(elements).eq(index).attr("data-status") == 2) {
						$(elements).eq(index).attr("src", "image/bud.png");
						$(elements).eq(index).attr("data-status", 3);
					}
				} else if (opt == "growover") {
					if ($(elements).eq(index).attr("data-status") == 3) {
						$(elements).eq(index).attr("src", "image/flower.gif");
						$(elements).eq(index).attr("data-status", 4);
					}
				} else if (opt == "harvest") {
					if ($(elements).eq(index).attr("data-status") == 4) {
						$(elements).eq(index).attr("src", "image/harvest.png");
						$(elements).eq(index).attr("data-status", 5);

						var img = document.createElement("img");
						img.src = "image/gold.gif";
						img.style.width = "40px";
						img.style.height = "40px";
						img.className = "gold";
						img.style.position = "absolute";
						img.style.right = "30%";
						img.style.top = "80px";

						//金币音乐
						$("#farmMusic")[0].pause();
						$("#goldMusic")[0].play();
						setTimeout(() => {
							$("#farmMusic")[0].play();
						}, 3000);
						$(".userAndGold .gold").html(parseInt($(".userAndGold .gold").html()) + 1);
						thisUser.money = parseInt($(".userAndGold .gold").html());

						$(elements).eq(index).parent("td").append(img);
						$(elements).eq(index).parent("td").find(".gold").animate({ top: "0px" }, 1000, function () {
							$(this).remove();
						});

						localStorage.setItem("qqfarm",JSON.stringify(thisUser));
					}
				}

				else if (opt == "chan") {
					if ($(elements).eq(index).attr("data-status") == 5) {
						$(elements).eq(index).attr("src", "image/none.png");
						$(elements).eq(index).attr("data-status", 1);
					}
				}

				index++;
				if (index >= 20) {
					clearInterval(timeId);
				}

			}, 100);


		}

		//土地点击事件
		$("table tr td img").on("click", function () {
			var landStatus = $(this).attr("data-status");
			if (landStatus == 1) {
				//空地 可以播种
				if (status == 2) {
					//操作状态为播种
					$(this).attr("src", "image/seed.png");
					$(this).attr("data-status", 2);

					setTimeout(() => {
						$(this).attr("src", "image/bud.png");
						$(this).attr("data-status", 3);
						setTimeout(() => {
							$(this).attr("src", "image/flower.gif");
							$(this).attr("data-status", 4);
						}, 5000);
					}, 5000);

				} else {
					alert("空地只能播种");
				}
			} else if (landStatus == 2) {
				//已经播种 等待成长
				alert("已经播种，请等待");
			} else if (landStatus == 3) {
				//正在成长，等待成熟
				alert("正在成长，请不要揠苗助长");
			} else if (landStatus == 4) {
				//已经成熟 等待收获
				if (status == 4) {
					$(this).attr("src", "image/harvest.png");
					$(this).attr("data-status", 5);

					var img = document.createElement("img");
					img.src = "image/gold.gif";
					img.style.width = "40px";
					img.style.height = "40px";
					img.className = "gold";
					img.style.position = "absolute";
					img.style.right = "30%";
					img.style.top = "80px";

					//金币音乐
					$("#farmMusic")[0].pause();
					$("#goldMusic")[0].play();
					setTimeout(() => {
						$("#farmMusic")[0].play();
					}, 3000);
					$(".userAndGold .gold").html(parseInt($(".userAndGold .gold").html()) + 1);
					thisUser.money = parseInt($(".userAndGold .gold").html());

					$(this).parent("td").append(img);
					$(this).parent("td").find(".gold").animate({ top: "0px" }, 1000, function () {
						$(this).remove();
					});

					localStorage.setItem("qqfarm",JSON.stringify(thisUser));
				}
			} else if (landStatus == 5) {
				//已经收获，地已经荒废，可以铲地
				if (status == 5) {
					$(this).attr("src", "image/none.png");
					$(this).attr("data-status", 1);
				}
			}
		})





	})

</script>

</html>